<template>
  <view class="container">
    <view class="settings">
      <view class="top">
        <image src="../../static/message/administrators.png" style="width: 144rpx; height: 144rpx; margin: auto; "
          mode=""></image>
        <view class="title">
          群管理员
        </view>
      </view>
      <view class="text">
        <view> ·群管理员可以拥有以下能力 </view>
        <view> ·设置二维码进群开关 </view>
        <view> ·移除群成员(群主/群管理员除外) </view>
        <view> ·发布群公告 </view>
        <view> ·修改群名称 </view>
      </view>
    </view>
    <view class="peopleall">
      <view class="people">
        <view v-for="(item,index) in 2" :key="index">
          <view class="hend">
            <image src="../../static/resort/video/img1.png" class="img1" mode=""></image>
            <image src="../../static/message/sex_woman.png" mode="" class="man"></image>
          </view>
          <view class="name">
            隔壁美女小美
          </view>
        </view>
        <image src="../../static/message/add-user.png" mode="" class="img2"></image>
        <image src="../../static/message/jian.png" mode="" class="img2" @click="toguanliyuan"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      toguanliyuan() {
        uni.navigateTo({
          url: '../message/groupManagementDelete',
        });
      }
    }
  }
</script>

<style lang="scss">
  .container {
    // margin: auto;
  }

  .settings {
    width: 90vw;
    margin: 10% auto 30rpx;
    padding-bottom: 25rpx;
    border-bottom: 2rpx solid #ccc;

    // margin: auto;
    .top {
      text-align: center;
    }

    .title {
      font-size: 40rpx;
      margin: 20rpx 0 30rpx;
    }

    .text {
      width: 65vw;
      margin: auto;
      // text-align: center;
      color: rgb(150, 150, 150);
      font-family: Noto Sans SC;

      font-size: 14px;

      view {
        margin-bottom: 15rpx;
      }
    }
  }

  .peopleall {
    padding: 5% 0% 5% 10%;
    background-color: #fff;
    margin-bottom: 10rpx;
  }


  .people {

    display: flex;
    flex-wrap: wrap;

    .hend {
      margin-right: 15rpx;
      height: 100rpx;
      position: relative;
      margin-bottom: 15rpx;

      .img1 {
        width: 100rpx;
        height: 100rpx;
      }

      .man {
        width: 28rpx;
        height: 28rpx;
        position: absolute;
        top: 85%;
        left: -5%;
      }


    }

    .name {
      // border: 1px solid;
      width: 120rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 10rpx;
      text-align: center;
      color: #ccc;
    }

    .img2 {
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;
    }

  }
</style>